<template>
  <!-- 智能药铺 -->
  <div>
    <div class="sympotoms">
      <ul class="sympotoms_common">
        <li v-for="item of sympotom" :key="item.index">
          <img :src="item.img">
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
    <!-- 儿科产品 -->
    <div class="header_product_hot">
      <div class="header_product_one">
        <div class="header_product_one_flex">
          <div class="header_product-span"></div>
          <div>儿科</div>
        </div>
      </div>
      <div class="header-product-two">查看更多></div>
    </div>
    <herbalshopping-box :productsPublic="productsPublic"></herbalshopping-box>
    <!-- 妇科产品 -->
    <div class="header_product_hot">
      <div class="header_product_one">
        <div class="header_product_one_flex">
          <div class="header_product-span"></div>
          <div>妇科</div>
        </div>
      </div>
      <div class="header-product-two">查看更多></div>
    </div>
    <herbalshopping-box :productsPublic="gynecologyProducts"></herbalshopping-box>
    <!-- 内科产品 -->
     <div class="header_product_hot">
      <div class="header_product_one">
        <div class="header_product_one_flex">
          <div class="header_product-span"></div>
          <div>男科</div>
        </div>
      </div>
      <div class="header-product-two">查看更多></div>
    </div>
    <herbalshopping-box :productsPublic="surgeryProducts"></herbalshopping-box>
    <!-- 外科产品 -->
     <div class="header_product_hot">
      <div class="header_product_one">
        <div class="header_product_one_flex">
          <div class="header_product-span"></div>
          <div>外科</div>
        </div>
      </div>
      <div class="header-product-two">查看更多></div>
    </div>
    <herbalshopping-box :productsPublic="painProducts"></herbalshopping-box>
    
    <div class="header_product_hot">
      <div class="header_product_one">
        <div class="header_product_one_flex">
          <div class="header_product-span"></div>
          <div>疼痛科</div>
        </div>
      </div>
      <div class="header-product-two">查看更多></div>
    </div>
    <herbalshopping-box :productsPublic="painProducts"></herbalshopping-box>
     <div class="header_product_hot">
      <div class="header_product_one">
        <div class="header_product_one_flex">
          <div class="header_product-span"></div>
          <div>杂症科</div>
        </div>
      </div>
      <div class="header-product-two">查看更多></div>
    </div>
    <herbalshopping-box :productsPublic="diseasesProducts"></herbalshopping-box>
  </div>
</template>

<script>
import herbalshopping from "../shopping/herbalshopping/herbalshopping.vue";
export default {
  components:{
    HerbalshoppingBox:herbalshopping,
  },
  data() {
    return {
      sympotom: [],
      productsPublic: [],
      gynecologyProducts: [],
      surgeryProducts:[],
      painProducts:[],
      diseasesProducts:[]
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    getdata() {
      this.$axios.get("http://localhost:8080/abc").then(data => {
        this.sympotom = data.data.sympotoms;
        // 循环6个科室
        this.productsPublic = data.data.pediatricProducts;
        this.gynecologyProducts = data.data.gynecologyProducts;
        this.internalProducts = data.data.internalProducts;
        this.surgeryProducts = data.data.surgeryProducts;
        this.painProducts = data.data.painProducts;
        this.diseasesProducts = data.data.diseasesProducts;

      });
    }
  }
};
</script>

<style scoped>
div.sympotoms {
  padding-top:50px;
  margin: 0 auto;
}
div.sympotoms ul {
  display: flex;
  justify-content: left;
  list-style: none;
  flex-wrap: wrap;
}
div.sympotoms ul li {
  text-align: center;
  width: 25%;
  color: #404142;
}
div.sympotoms ul li img {
  border-radius: 50%;
}
div.header_product_hot {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 10px;
  line-height: 24px;
  background: #FFFFFF;
}
div.header_product_one {
  font-weight: 900;
}
div.header_product_one_flex {
  display: flex;
}
div.header_product_one div.header_product-span {
  background: #29bf9d;
  display: inline-block;
  width: 5px;
  height: 24px;
  margin-right: 5px;
}
</style>
